<template>
    <div class="dir-left-nowrap gap app-pagination">
        <NuxtLink v-if="!isFirstPage" :to="createUrl(currentPage - 1)" @click="prev()">
            上一页
        </NuxtLink>
        <div class="dir-left-nowrap gap page-count">
            <template v-for="item in pageBtnList">
                <NuxtLink :to="createUrl(item)" :class="{ 'actived': currentPage === item }">
                    {{ item }}</NuxtLink>
            </template>
        </div>
        <NuxtLink v-if="!isLastPage" :to="createUrl(currentPage + 1)" @click="next()">下一页</NuxtLink>
    </div>
</template>

<script setup lang="ts" name="AppPagination">
import { NuxtLink } from "#components";
/**
 * 分页组件
 * @example <AppPagination :total="100" :page="1"></AppPagination>
 * @example <AppPagination :total="100" :page="1" key="kkk"></AppPagination>
 */
export interface AppPaginationProps {
    /**当前页码 */
    page?: number | string,
    /**每页数量 */
    pageSize?: number,
    /**分页显示的按钮数量 */
    pageSlot?: number,
    /**数据总数 */
    itemCount?: number,
    /**页总数 */
    pageCount?: number,
    /**
     * 分页参数类型
     * @default params
     * @description params: 路由参数, query: 路由查询参数 ,params => /post/page/1, query => /post/page?page=1
     */
    type?: 'query' | 'params',
    /**
     * 分页参数名称
     * @default page
     * @description type = query => /post/page?[key]=1
     */
    key?: string
}

const props = withDefaults(defineProps<AppPaginationProps>(), {
    page: 1,
    pageSize: 10,
    pageSlot: 6,
    itemCount: 0,
    type: 'query',
    key: 'page'
})

const route = useRoute()
/**
 * 完成地址
 */
function createUrl(current: number) {
    if (props.type === 'params') {
        return {
            path: `${route.path}/${current}`,
            query: { ...route.query }
        }
    }
    return {
        path: `${route.path}`,
        query: {
            ...route.query,
            [props.key]: current
        }
    }
}

const { currentPage, pageCount, isFirstPage, isLastPage, prev, next } = useOffsetPagination({
    total: props.pageCount ? props.pageCount * props.pageSize : props.itemCount,
    page: isNaN(+props.page) ? 1 : +props.page,
    pageSize: props.pageSize,
})

watch(() => props.page, () => {
    currentPage.value = isNaN(+props.page) ? 1 : +props.page
})

/**
 * 分页按钮列表
 */
const pageBtnList = computed(() => {
    let pageLeftArr: number[] = []
    let pageRightArr: number[] = []
    const pageArr: number[] = Array.from({ length: props.pageCount ?? pageCount.value }, (v, k) => k + 1)
    const [leftPageLength, rightPageLength] = props.pageSlot % 2 === 0 ? [Math.floor(props.pageSlot / 2), Math.ceil(props.pageSlot / 2)] : [Math.floor(props.pageSlot / 2), Math.ceil(props.pageSlot / 2)]
    //当前页码在数组中的位置
    const currentPageindex = pageArr.indexOf(currentPage.value)
    const leftStartIndex = currentPageindex - leftPageLength
    const rightEndIndex = currentPageindex + rightPageLength
    pageLeftArr = pageArr.slice(leftStartIndex, currentPageindex)
    pageRightArr = pageArr.slice(currentPageindex + 1, rightEndIndex)
    if (!pageLeftArr.length || pageLeftArr[0] < 1) {
        pageLeftArr = pageArr.slice(0, props.pageSlot)
        pageRightArr = []
        return pageLeftArr
    }
    if (!pageRightArr.length || pageRightArr[pageRightArr.length - 1] >= pageArr.length) {
        pageLeftArr = []
        pageRightArr = pageArr.slice(-props.pageSlot)
        return pageRightArr
    }

    return [
        ...pageLeftArr,
        currentPage.value,
        ...pageRightArr
    ]
})
</script>

<style scoped lang="scss">
.app-pagination {
    .page-count {
        .actived {
            color: #ff9c40;
        }
    }
}
</style>
